<script lang="ts" setup>

</script>

<template>
  <a-comment class="chat-content-it" v-for="item in 2">
    <!-- 用户姓名 -->
    <template #author><h3>小q的个人生活</h3></template>
    <!-- 用户头像 -->
    <template #avatar>
      <a-avatar
        class="chat-content-it-img"
        src="src/assets/portrait/03.jpg"
        alt="Han Solo"
      />
    </template>
     <!-- 用户输入内容 -->
    <template #content>
      <p class="chat-content-it-p">
        君不见黄河之水天上来，奔流到海不复回。
        君不见高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。
        天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。
        岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。
        钟鼓馔玉不足贵，但愿长醉不复醒。 古来圣贤皆寂寞，惟有饮者留其名。
        陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。
        五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
      </p>
    </template>
  </a-comment>
</template>

<style lang="scss" scoped>
// 群友
.chat-content-it {
  width: 40%;
  padding: 0 20px;

  &-img {
    width: 30px;
    height: 30px;
  }

  &-p {
    display: inline-block;
    width: auto; /* 或者width: fit - content; */
    padding: 10px;
    background-color: white;
    border-radius: 5px;
  }
}
</style>
